<template>
  <div style="padding: 20px">
    <el-row>
      <el-col>
        <el-form ref="postForm" :model="postForm" label-width="80px" :inline="true">
          <el-form-item label="岗位名称" prop="postName">
            <el-input v-model="postForm.postName" placeholder="请输入岗位名称" size="small" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="postForm.status" size="small">
              <el-option label="正常" :value="false" />
              <el-option label="停用" :value="true" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="onSearch">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 10px">
      <el-col :span="24">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addPost">新增岗位</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table v-loading="loading" :data="tableData" border style="width: 100%">
          <el-table-column prop="postName" label="岗位名称" align="center" />
          <el-table-column prop="postCode" label="岗位编码" align="center" />
          <el-table-column prop="remark" align="center" label="备注信息" />
          <el-table-column prop="createBy" align="center" label="创建人" />
          <el-table-column prop="createTime" align="center" label="创建时间" />
          <el-table-column prop="createTime" align="center" label="状态">
            <template #default="scope">
              {{ scope.row.status == false ? '正常' : '停用' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row.postId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 表格下方放置一个分页组件，并使其水平居中 -->
    <el-row type="flex" justify="center" style="margin-top: 20px">
      <el-col :span="12">
        <!-- 根据需要调整 span 值 -->
        <!-- 表格下方放置一个分页组件 -->
        <el-pagination
          :current-page="page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>

    <!-- 新增/修改岗位的弹窗组件 -->
    <PostDialog :title="title" :show-visible.sync="showVisible" :edit-data="editData" @refreshData="refreshData" />
  </div>
</template>

<script>
  import PostDialog from './components/PostDialog.vue'
  import { getPostList, deleteByPostId } from '@/api/post'
  export default {
    name: 'Post',
    components: { PostDialog },
    data() {
      return {
        title: '',
        showVisible: false,
        loading: false, // 表格加载状态
        total: 0, // 总记录数
        page: 1, // 当前页码
        pageSize: 10, // 每页记录数
        tableData: [], // 表格数据
        postForm: {
          postName: '',
          status: false
        },
        editData: {} // 编辑的数据
      }
    },
    created() {
      this.getPostList()
    },
    methods: {
      /**
       * 获取岗位列表信息
       */
      async getPostList() {
        this.loading = true
        const { total, list } = await getPostList(this.page, this.pageSize, this.postForm)
        this.total = total
        this.tableData = list
        this.loading = false
      },
      onSearch() {
        this.getPostList()
      },
      refresh() {
        this.$refs.postForm.resetFields()
        this.postForm.status = false
        this.getPostList()
      },
      /**
       * 选择每页显示多少条时候触发
       * @param pageSize
       */
      handleSizeChange(pageSize) {
        // console.log(`每页 ${val} 条`)
        this.pageSize = pageSize
        this.getPostList()
      },
      /**
       *点击页码数发生变化时候触发
       * @param page
       */
      handleCurrentChange(page) {
        // console.log(`当前页: ${val}`)
        this.page = page
        this.getPostList()
      },
      addPost() {
        this.title = '新增岗位'
        this.showVisible = true
      },
      refreshData() {
        this.getPostList()
      },
      /**
       * 编辑岗位<弹窗回显数据>
       * @param row
       */
      handleEdit(row) {
        this.title = '编辑岗位'
        this.showVisible = true
        this.editData = row
      },
      handleDelete(postId) {
        this.$confirm('此操作将永久删除该岗位, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await deleteByPostId(postId)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getPostList()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    }
  }
</script>

<style></style>
